<!--海外出库-拣货记录-->
<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" />
    <ex_super_table_page v-bind="option" ref="SuperTablePage">
      <!-- <template v-slot:action-right>
        <div class="flex_row">
          <el-button type="primary">{{ $tt('label_export') }}</el-button>
        </div>
      </template> -->
    </ex_super_table_page>
  </div>
</template>
<script>
import popover_sn_detail from '@/component/wms/popover_sn_detail'

import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'outbound>picking_task_record'
import emitOnFunction from '@/mixin/emit-on-function';
export default {
  title: "title_standard_picking_record",
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {popover_sn_detail,},
  data() {
    return {
      option: {
        search: {
          model: [
            { label: "label_pick_code", key: "pickingTaskNo", },
            { label: "label_outbound_code", key: "outOrderNo", },
            { label: "label_pick_user", key: "pickingUserName", },
            { label: "label_pick_car_code", key: "cartContainerNo", },


            { key: 'bizType', label: 'label_business_type', type: 'select', enum: 'BizTypeEnum', },
            { label: "label_sku", key: "skuId", type: "sku_selec_input" },

            {
              label: "label_create_time", key: "gmtCreateForm", type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const limitKey = 'gmtCreateTo'; const limitValue = data[limitKey]; const value = data[item.key];
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_start_time"
                  attrs={{ type: 'datetime' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue < date.getTime()) : false } }}
                />)
              }
            },
            {
              label: "~", key: "gmtCreateTo", type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const limitKey = 'gmtCreateForm'; const limitValue = data[limitKey]; const value = data[item.key];
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_end_time"
                  attrs={{ type: 'datetime', 'default-time': '23:59:59' }} pickerOptions={{ disabledDate: date => { return limitValue ? (limitValue > date.getTime()) : false } }}
                />)
              }
            },
          ],
        },
        table: {
          url: "/wms-api/outbound/OutboundPickingTaskRpc/selectTaskDetailListPage.json",
          model: this.init_table_model(),
        },

      },

    };
  },

  methods: {
    option_table_model() {
      return [
        {
          key: 'boxNo', label: 'label_box_code', 'min-width': 150,
        },
        { key: 'pickTaskNo', label: 'label_pick_code', 'min-width': 140, },
        { key: 'outOrderNo', label: 'label_outbound_code', 'min-width': 140, },
        { key: 'bizType', label: 'label_business_type', 'width': 120, formatter: (r, c, v) => this.$enumShow(v, "BizTypeEnum") },

        // { key: 'waveNo', label: 'label_wave_code',  'show-overflow-tooltip': true, },
        {
          key: "skuBarcode", label: "label_sku_code", 'width': 120,
          formatter: (r, c, v) => (r.skuId < 0) ? '——' : v
        },
        {
          key: "skuOnlyCode", label: "label_sku_only_code", 'width': 120,
          formatter: (r, c, v) => (r.skuId < 0) ? '——' : v
        },
        {
          key: 'skuNameCn', label: 'label_sku_name', 'width': 120, 'show-overflow-tooltip': true,
          formatter: (r, c, v) => (r.skuId < 0) ? '——' : this.$formatNameCode(v, r.skuNameEn)
        },
        { key: "cartContainerNo", label: "label_pick_car_code", 'width': 130, },

        { key: 'locationCode', label: 'label_recommend_location', 'width': 100, },
        { key: 'pickCount', label: 'label_plan_pick_count', 'width': 100, },
        {
          key: 'actualPickingDetail', label: 'label_actual_pick_location', 'min-width': 180,
          render: (h, { row }) => {
            const list = row.actualPickingDetail ? JSON.parse(row.actualPickingDetail) : []
            return (<div>
              {list.map(it => (<div>【{it.locationCode}】→(<span class="bold color_success">{it.count}</span>)</div>))}
            </div>)
          }
        },
        {
          key: 'actualPickingCount', label: 'label_actual_pick_count', 'width': 100,
          render: (h, scope) => {
            const list = scope.row.actualPickingDetail ? JSON.parse(scope.row.actualPickingDetail) : []
            return h(popover_sn_detail, {
              props: {
                value: scope.row.actualPickingCount,
                list: list,
                option:{stockUsage:"stockUseType",snCode:"stockSkuSnCode"},
              },
            })
          },
        },
        { key: 'diffNum', label: 'label_pick_diffNum', 'width': 80, formatter: (r) => r.pickCount - r.actualPickingCount },
        { key: 'pickPerson', label: 'label_pick_user', 'width': 100, 'show-overflow-tooltip': true, },
        { key: 'pickDate', label: 'label_pick_date', 'width': 130, formatter: (r, c, v, i) => this.$dateFormat(v) },

      ]
    },
  }
};

</script>
<style></style>
